<template>
  <div class="Authority">
    <el-table
      :data="
        getData.slice(
          System.permission.pageSize * (System.permission.currentPage - 1),
          System.permission.pageSize * System.permission.currentPage
        )
      "
      :default-sort="System.permission.defaultSort"
    >
      <template #empty>
        {{ $t("default.noData") }}
      </template>
      <el-table-column label="权限信息">
        <template #header>
          <div class="column-header">
            <el-icon :size="20"
              ><IAntDesignBlockOutlined></IAntDesignBlockOutlined
            ></el-icon>
            <span style="flex: 2">权限信息</span>
            <el-input v-model="search" style="flex: 1" placeholder="查找">
              <template #suffix>
                <el-icon><IEpSearch></IEpSearch></el-icon>
              </template>
            </el-input>
          </div>
        </template>
        <el-table-column prop="date" width="150" sortable>
          <template #header>
            <div class="column-header">
              <el-icon :size="20">
                <IAntDesignCalendarOutlined></IAntDesignCalendarOutlined>
              </el-icon>
              <span>日期</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="150">
          <template #header>
            <div class="column-header">
              <el-icon :size="20"
                ><ISimpleIconsNamecheap></ISimpleIconsNamecheap
              ></el-icon>
              <span>名称</span>
            </div>
          </template></el-table-column
        >
        <el-table-column prop="identifier" width="150">
          <template #header>
            <div class="column-header">
              <el-icon :size="20"
                ><ICarbonIdentification></ICarbonIdentification
              ></el-icon>
              <span> 标识</span>
            </div>
          </template></el-table-column
        >
        <el-table-column>
          <template #header>
            <div class="column-header">
              <el-icon :size="20"><IEpTickets /></el-icon>
              <span> 具体信息</span>
            </div>
          </template>
          <el-table-column
            prop="state"
            width="150"
            label="状态"
            :filters="[
              { text: '开启', value: 'true' },
              { text: '关闭', value: 'false' },
            ]"
            :filter-method="filterState"
            filter-placement="bottom-end"
          >
            <template #header>
              <div class="column-header">
                <el-icon :size="20"
                  ><ICarbonColorSwitch></ICarbonColorSwitch
                ></el-icon>
                <span>状态</span>
              </div>
            </template>
            <template #default="scope">
              <el-switch
                v-model="scope.row.state"
                :loading="loading"
                :before-change="beforeChange"
                width="80px"
                inline-prompt
                active-text="已开启"
                inactive-text="已关闭"
                @change="change"
                :disabled="scope.row.identifier == 'yyqs'"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" width="150">
            <template #header>
              <div class="column-header">
                <el-icon :size="20"><ICarbonTypes></ICarbonTypes></el-icon>
                <span>类型</span>
              </div>
            </template>
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.type == '1'
                    ? 'danger'
                    : scope.row.type == '2'
                    ? 'warning'
                    : 'success'
                "
                disable-transitions
                >{{ types[Number(scope.row.type) - 1].label }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="authority">
            <template #header>
              <div class="column-header">
                <el-icon :size="20"
                  ><IAntDesignSafetyCertificateOutlined></IAntDesignSafetyCertificateOutlined
                ></el-icon>
                <span>权限</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column fixed="right" width="180">
        <template #header>
          <div class="operation">
            <div><span>操作</span></div>
            <div>
              <el-button plain type="primary" @click="System.permissionAdd()"
                ><el-icon><IEpPlus></IEpPlus></el-icon>新建身份</el-button
              >
            </div>
          </div>
        </template>
        <template #default="scope">
          <el-button-group>
            <el-button
              type="primary"
              text
              @click="System.permissionEditOrDelete(1, scope.row)"
              :disabled="scope.row.identifier == 'yyqs'"
              >修改<el-icon><IEpEdit></IEpEdit></el-icon
            ></el-button>
            <el-button
              type="primary"
              text
              @click="System.permissionEditOrDelete(0, scope.row)"
              :disabled="scope.row.identifier == 'yyqs'"
              >删除<el-icon><IEpDelete></IEpDelete></el-icon
            ></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="System.permission.currentPage"
        v-model:page-size="System.permission.pageSize"
        :disabled="false"
        :background="false"
        layout="total,sizes,prev, pager, next, jumper"
        :total="getData.length"
        :page-sizes="[10, 20, 30, 40, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="System.permission.isDialogDisplay"
      title="身份信息"
      @open="openForm()"
    >
      <el-form :model="System.permission.identityForm">
        <el-form-item label="名称" label-width="140px">
          <el-input v-model="System.permission.identityForm.name" />
        </el-form-item>
        <el-form-item label="标识" label-width="140px" required>
          <el-input
            v-model="System.permission.identityForm.identifier"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="类型" label-width="140px" required>
          <el-select
            v-model="System.permission.identityForm.type"
            placeholder="请选择"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in types"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" label-width="140px" required>
          <el-scrollbar max-height="200px">
            <el-tree
              ref="permissionTree"
              :data="Daside.menu"
              :props="System.permission.props"
              node-key="value"
              show-checkbox
              empty-text="请选择"
              @check="selectTree"
            >
              <template #default="{ data: { title, icon, value, type } }">
                <span class="tree-node">
                  <span
                    ><el-icon :size="15"><icon :icon="icon"></icon> </el-icon>
                    {{ $t(title) }}</span
                  >
                  <el-checkbox-group
                    v-model="gsRwd"
                    size="small"
                    v-if="type == 0"
                  >
                    <el-checkbox-button
                      v-for="item in [
                        { label: 4, value: '读' },
                        { label: 2, value: '写' },
                        { label: 1, value: '删' },
                      ]"
                      :key="item.value"
                      :label="item.label + '||' + value"
                    >
                      {{ item.value }}
                    </el-checkbox-button>
                  </el-checkbox-group></span
                >
              </template>
            </el-tree>
          </el-scrollbar>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="System.permissionSaveOrCancel(0)">取消</el-button>
          <el-button type="primary" @click="System.permissionSaveOrCancel(1)"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  // name: "authority",
};
</script>
<script setup lang="ts">
import { useSystem } from "../../../store/system";
import { useDaside } from "../../../store/Daside";
import { ElTree } from "element-plus";
const System = useSystem();
const Daside = useDaside();

//保存菜单读写删权限
const gsRwd = computed({
  set: (val) => {
    if (val.length == 0) {
      System.permission.identityForm.authority = val;
      return;
    }
    let val1 = val.at(-1)!;
    let vals = val1.split("||");

    let index = -1;
    if (System.permission.identityForm.rwd.length > 0) {
      index = System.permission.identityForm.rwd.findIndex(
        (v: any) => v == vals[1]
      );

      if (index > -1) {
        System.permission.identityForm.authority = val;
      }
    }
  },
  get: () => {
    return System.permission.identityForm.authority;
  },
});

//搜索功能
const search = ref("");
const getData = computed(() => {
  let result = System.permission.identity.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  );
  if (result.length == 0) {
    result = System.permission.identity.filter(
      (data) =>
        !search.value ||
        data.identifier.toLowerCase().includes(search.value.toLowerCase())
    );
  }
  return result;
});

//筛选
const filterState = (value: string, row: any) => {
  return row.state.toString() == value;
};

//身份开关的加载状态
const loading = ref(false);
const beforeChange = (): boolean | Promise<boolean> => {
  loading.value = true;
  return new Promise((resolve) => {
    setTimeout(() => {
      loading.value = false;
      return resolve(true);
    }, 1000);
  });
};

const change = (val: string | number | boolean) => {
  val ? ElMessage.success("身份启动成功！") : ElMessage.info("身份关闭成功！");
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
//分页

//类型
const types = [
  { value: 1, label: "危险" },
  { value: 2, label: "警告" },
  { value: 3, label: "正常" },
];

//权限

//保存选中的状态
const selectTree = (x: { value: string }, y: { checkedKeys: any }) => {
  System.permission.identityForm.rwd = y.checkedKeys;
};

const permissionTree = ref<InstanceType<typeof ElTree>>();
const openForm = () => {
  //显示保存的选择状态
  permissionTree.value!.setCheckedKeys(
    System.permission.identityForm.rwd,
    false
  );
};
</script>
<style scoped lang="scss">
.Authority {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  .el-table {
    flex-grow: 1;
    flex-basis: 0;
    .column-header {
      display: flex;
      align-items: center;
      float: left;
      span {
        margin-left: 5px;
      }

      //搜索框
      &:first-child {
        width: 80%;
      }
    }
    .operation {
      display: flex;
      flex-direction: column;
      align-items: center;
      div {
        margin-top: 15px;
      }
    }
  }

  .pagination {
    height: 50px;
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }
}

.el-scrollbar {
  border-radius: 5px;
  border: 2px solid rgb(231, 231, 231);
  width: 100%;
  .el-tree {
    min-height: 200px;
    .tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
}
</style>
